<template>
    <div class="white-box">
        <el-button class="table-mb" type="primary" @click="addPack">添加物流公司分组</el-button>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="group_id" label="分组ID"> </el-table-column>
            <el-table-column prop="group_name" label="分组名称"> </el-table-column>
            <el-table-column prop="group_level" label="分组权重"> </el-table-column>
            <el-table-column prop="updated_at_label" label="更新时间"></el-table-column>
            <el-table-column label="操作" width="140" fixed="right">
                <template #default="{ row }">
                    <el-button class="theme-btn" link type="primary" @click="packEdit(row)">编辑</el-button>
                    <el-popconfirm title="确定删除吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="packDelete(row)">
                        <template #reference>
                            <el-button class="theme-btn" link type="primary" style="margin-left: 14px">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加/编辑 -->
        <el-dialog
            v-model="dialogUpdate"
            :title="updateClass == 1 ? '添加物流公司分组' : '编辑物流公司分组'"
            width="700px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            @close="closePack"
        >
            <div>
                <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheckPack" label-width="120px">
                    <el-form-item label="分组名称" prop="group_name">
                        <el-input v-model.trim="ruleForm.group_name" clearable placeholder="请输入分组名称" />
                    </el-form-item>
                    <el-form-item label="分组权重" prop="group_level">
                        <el-input
                            v-model.trim="ruleForm.group_level"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            clearable
                            placeholder="请输入分组权重，越小越重要"
                        />
                        <p class="input-tips">分组权重越小越重要</p>
                    </el-form-item>
                    <el-form-item>
                        <div class="flexs" style="margin-top: 30px">
                            <el-button type="primary" :loading="form_loading" @click="submitPackForm(ruleRef)">
                                {{ updateClass == 1 ? "确认添加" : "确认保存" }}
                            </el-button>
                            <el-button @click="resetPackForm(ruleRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>

    <go-back></go-back>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, reactive,onBeforeUnmount } from "vue"
import { useRouter } from "vue-router"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

onBeforeUnmount(() => {
    
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_text, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
const box_level_arrs = ["mini1", "mini2", "mini3", "mini4", "特小", "小包", "中包", "大包"]
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("express/group/index", params)
}

/**
 * 添加/编辑配置
 * @param {Boolean} dialogUpdate 添加/编辑弹窗状态
 * @param {Number} updateClass 1是添加，2是编辑
 */
const dialogUpdate = ref(false)
const form_loading = ref(false)
const updateClass = ref(1)
const ruleRef = ref(null)
const ruleForm = reactive({
    id: "",
    group_name: "",
    group_level: "",
})
const ruleCheckPack = reactive({
    group_name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
    group_level: [{ required: true, message: "请输入分组权重", trigger: "blur" }],
})
const submitPackForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                group_name: ruleForm.group_name,
                group_level: ruleForm.group_level,
            }
            if (updateClass.value == 2) {
                data.group_id = ruleForm.id
            }
            let url = updateClass.value == 1 ? "express/group/add" : "express/group/update"
            proxy.$axios
                .post(url, data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogUpdate.value = false
                        proxy.$message({ message: `${updateClass.value == 1 ? '添加成功！' : '编辑成功！'}`, type: "success" })
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetPackForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const closePack = () => {
    dialogUpdate.value = false
    resetPackForm(ruleRef.value)
}
const addPack = () => {
    dialogUpdate.value = true
    updateClass.value = 1
}
const packEdit = (row) => {
    dialogUpdate.value = true
    updateClass.value = 2
    setTimeout(() => {
        ruleForm.id = row.group_id
        ruleForm.group_name = row.group_name
        ruleForm.group_level = row.group_level
    }, 50)
}

const packDelete = (row) => {
    proxy.$axios
        .post("express/group/delete", {
            group_id: row.group_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "BaleConfig",
}
</script>

<style lang="less" scoped></style>
